<template>
  <Nav>
    {{ $t('market.nav') }}
    <template #right>
      <div @click="router.push('/market/my')">{{ $t('market.my') }}</div>
    </template>
  </Nav>
  <div class="page-market">
    <div class="content">
      <div class="search">
        <input v-model="where.title" type="text" :placeholder="$t('market.search')" />
      </div>
      <div class="area">
        <div class="item" v-if="where.area" @click="emptyArea()">{{ where.area }} <md-icon name="wrong" size="sm"></md-icon></div>
      </div>
      <div class="tabs">
        <div class="item" :class="{ on: where.type == 'sell' }" @click="setTabs('sell')">{{ $t('market.sell') }}</div>
        <div class="item" :class="{ on: where.type == 'buy' }" @click="setTabs('buy')">{{ $t('market.buy') }}</div>
      </div>
      <template v-for="(item, key) in data">
        <div class="box animate__fadeIn animate__animated animate__faster" @click="onConfirm(item, key)">
          <div class="type" :class="{ buy: item.type == 'buy' }">{{ $t('market.' + item.type) }}</div>
          <div class="price" :class="{ buy: item.type == 'buy' }">
            <b>HWD</b>
            <md-amount :value="Number(item.price)" :precision="2" transition></md-amount>
          </div>
          <div style="overflow: hidden">
            <div class="name wrap">{{ item.name }}</div>
            <div class="body wrap">
              <template v-for="(path, key) in item.name_path">
                <div>{{ path }}</div>
              </template>
            </div>
          </div>
          <div class="token wrap" v-if="item.type == 'sell'">
            {{ item.area.area_token[0].name }}
          </div>
        </div>
      </template>
      <div class="page">
        <md-activity-indicator v-if="where.loading" type="carousel" color="#5d62a7" :size="15"></md-activity-indicator>
        <md-button v-else-if="where.page <= where.page_max" type="link" icon="arrow-down" @click="getData">{{ $t('page.next') }}</md-button>
      </div>
      <div class="empty" v-if="!where.loading && data.length == 0">
        {{ $t('page.empty') }}
      </div>
    </div>
  </div>
  <Confirm ref="confirm" />
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { toast, dialog } from '@/style'
import { t } from '@/lang'
import { level, list, trade } from '@/api/market'
import { packager, random } from '@/web3'
import Nav from '@/components/nav.vue'
import Confirm from '@/components/confirm.vue'

const route = useRoute()
const router = useRouter()
const confirm = ref(null)

const where = reactive({
  source: 'all',
  type: 'sell',
  title: null,
  province: null,
  city: null,
  county: null,
  town: null,
  area: '',
  loading: false,
  page: 1,
  page_max: 1,
  limit: 10
})

const data = ref([])

// 监听input
watch(() => where.title, () => {
  setSearch()
})

// 清空区域
const emptyArea = () => {
  where.province = null
  where.city = null
  where.county = null
  where.town = null
  where.area = ''
  setSearch()
}

// 范围
const setQuery = (query) => {
  where[level(query.level)] = query.id
  where.area = query.area
  setTabs(query.type)
}

// 搜索
const setSearch = () => {
  where.page = 1
  data.value = []
  getData()
}

// 切换
const setTabs = (name) => {
  where.type = name
  setSearch()
}

// 加载列表
const getData = () => {
  where.loading = true
  list(where).then(res => {
    res.data.map(item => {
      const name = item.area_path.split('---')
      item.name = name.pop()
      item.name_path = name
      return item
    })
    data.value.push(...res.data)
    // 记录页码
    where.page = res.meta.pagination.current_page + 1
    where.page_max = res.meta.pagination.total_pages
  }).finally(() => {
    where.loading = false
  })
}

// 确认交易
const onConfirm = (item, key) => {
  const price = item.type == 'sell' ? [Number(item.price).toFixed(2), 'HWD'] : [item.name, 'NFT']
  confirm.value.open(price, item.user.uuid, 'nft_gas_description', async() => {
    // 打包数据
    const pack = await packager({
      random: random(),
      market_id: item.id
    })
    
    toast(t('market.confirm_load'), 'ring', 0)
    trade(pack).then(res => {
      toast(t('ok'))
      data.value.splice(key, 1)
    }).catch(err => {
      toast(err.message)
    })
  })
}

// 设置范围
if(route.query.area) {
  setQuery(route.query)
} else {
  getData()
}

</script>

<style lang="scss" scoped>
  .page-market{
    min-height: 100%;
    background: url('@/assets/page.jpg') center center no-repeat;
    background-size: cover;
    background-attachment:fixed;

    .content{
      padding: 130px 30px 30px;
      overflow: hidden;
    }
    
    .empty{
      color: #5d62a7;
      font-size: 14px;
      line-height: 30px;
      text-align: center; 
      display:block;
      padding: 30px;
    }
    
    .page{
      margin-top: 20px;
      padding: 20px;
      display: flex;
      align-items: center;
      flex-direction: column;
      .md-button.link{
        color: #5d62a7;
      }
    }
    
    .search{
      padding: 0 20px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .15);
      overflow: hidden;
      border-radius: 50px;

      input{
        width: 100%;
        height: 45px;
        background: 0;
        border: 0;
        color: #fff;
        font-size: 16px; 
        outline: 0;
        text-align: center;

        &::-webkit-input-placeholder { 
          color: #5d62a7; 
        } 
        &:-moz-placeholder { 
          color: #5d62a7; 
        } 
        &::-moz-placeholder { 
          color: #5d62a7; 
        } 
        &:-ms-input-placeholder { 
          color: #5d62a7; 
        }
      }
    }
    
    .area{
      padding: 20px 0;
      text-align: center;
      
      .item{
        line-height: 25px;
        padding: 0 7px 0 10px;
        border-radius: 3px;
        color: rgba(255, 255, 255, .5);
        background: #292d70;
        font-size: 12px;
        display: inline-block;
      }
    }
    
    .tabs{
      background: rgba(255,255,255, .1);
      padding: 5px;
      border-radius: 100px;
      overflow: hidden;
      display: flex;
      
      .item{
        flex-grow: 1;
        text-align: center;
        color: #5d62a7;
        line-height: 35px;
        border-radius: 100px;
        transition: all .4s ease;
        
        &.on{
          background: #5d62a7;
          color: #fff;
        }
      }
    }

    .box{
      padding: 15px 20px;
      margin-top: 20px;
      border-radius: 10px;
      background: linear-gradient(to left, #292d70, #1d0f5e);
      overflow: hidden;
      position: relative;
      transition: all .4s ease;
      
      .type{
        position: absolute;
        left: 15px;
        top: 0;
        color: #fff;
        background: #1cd4b6;
        border-radius: 0 0 6px 6px;
        font-size: 12px;
        line-height: 20px;
        padding: 0 10px;
        
        &.buy{
          background: #ffc21b;
        }
      }
      
      .name{
        color: #fff;
        font-size: 16px;
        line-height: 25px;
        margin-top: 15px;
        overflow: hidden;
      }
      
      .body{
        color: rgba(255, 255, 255, .4);
        font-size: 12px;
        padding-top: 5px;
        div{
          display: inline;
          margin-right: 5px;
        }
      }
      
      .price{
        float: right;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.15);
        font-size: 18px;
        color: #1cd4b6;
        padding: 10px;
        text-align: center;
        &.buy{
          color: #ffc21b;
        }
        b{
          color: rgba(255, 255, 255, .3);
          display: block;
          font-size: 12px;
          padding-bottom: 3px;
        }
      }
      
      .token{
        color: #5d62a7;
        font-size: 12px;
        line-height: 20px;
        margin-top: 7px;
      }
    }
  }
</style>